[iOS] SendBirdを使ってみた!
はじめに
こんにちは。最近は朝のコーヒーが欠かせない田宮です。 勤務する社屋が岩本町に移ったことで、近くにあるCiscaというカフェに行ったりしています。ちなみに、壁にはCiscoの無線ネットーワーク機器(たぶん無線ルータ)が壁にかかっていまして、だからCiscaなのかな、と思っています。
さて、先日よこやまゆうだいより、Developers.IO で以下の記事をリリースしました。 簡単にアプリにチャット機能を追加できる!? SendBird が正式公開されました! | Developers.IO
今回は、実際に iOS でチャット画面を動かすところまでやってみたいと思います。
なお、今回の記事は、SendBirdの公式ドキュメントの以下の部分を参考に書きました。 Setup with Sample UI | SendBird iOS SDK
流れ
ここから先は以下の流れで進めていきます。
- 1.プロジェクトの作成・SDKインストール
- 2.サンプルプログラムから必要なファイルをコピー
- 3.ViewControllerでSendBirdのチャット画面を生成
- 4.実行
1.プロジェクトの作成・SDKインストール
プロジェクト作成
はじめに、Xcodeでプロジェクトを作成します。今回は、以下のように作成しましょう。
- 言語: Swift
- 使用テンプレート: Single View Application
Cocoapods
Cocoapodsを使います。
コンソールからpod initを実行し、作成されるのPodfileを開くと以下のようになっています(Cocoapodsのバージョンにより異なる可能性があります)。
# Uncomment this line to define a global platform for your project # platform :ios, '8.0' # Uncomment this line if you're using Swift # use_frameworks! target '(target名)' do end
ここで、use_frameworks!の行頭の#を削除し、コメントアウトします。
続いて、target…からendの間に、以下を追加します。
pod 'SendBirdSDK' pod "AFNetworking"
最後にpod installを実行し、SDKをプロジェクトに組み込みます。
※ なお、AFNetworking は、後述のSendBirdCommon.swiftにて importされているため、追加しています。import文をコメントアウトしても、その後の動作に支障ないことから、実際は使われていないもののようです。
2.サンプルプログラムから必要なファイルをコピー
サンプルプログラムをゲット
GitHubでサンプルをクローンしておきます。 https://github.com/smilefam/sendbird-sample
クローンすると、こんな感じのフォルダ・ファイル構成になっています。
. ├── README.md ├── SendBirdAndroidSample ├── SendBirdSwiftSample ├── SendBirdWebSample ├── SendBirdXamarinSample ├── SendBirdiOSSample ├── build_project.py └── set_app_id.sh
今回は、SendBirdSwiftSampleに入ります。
必要なファイルのコピー
サンプルなので、もちろんこのままでも実行出来ますが、今回は、自分で生成したプロジェクトに、必要なファイルを引っ張ってくることにします。
プロジェクト中の以下のファイルを、ドラッグアンドドロップなどで、以下ファイル・フォルダを先ほど作成したプロジェクトに追加します。
- SendBirdCommon.swift
- SendBirdMessaging フォルダ
- SendBirdChat フォルダ
また、画像ファイルもコピーします。
- Assets.xcassets の中身をすべてドラッグアンドドロップで引っ張ってくる
ようにしましょう。
これで、自分で画面を作らずとも、ありものを使ってチャット画面を動作させることが出来ます。
3.ViewControllerに追記
プロジェクト作成時に自動生成されたViewControllerに追記していきます。
// SendBird起動 internal func startSendBird() { // 各種定数の宣言 let APP_ID = "A7A2672C-AD11-11E4-8DAA-0A18B21C2D82" let USER_ID = SendBirdUtils.deviceUniqueID() let userNameString = (USER_ID as NSString).substringToIndex(5) let USER_NAME = "User-\(userNameString)" let CHANNEL_URL = "jia_test.Lobby" // チャット画面の生成と各種パラメータの設定 let viewController = ChattingTableViewController.init() SendBird.initAppId(APP_ID, withDeviceId: SendBird.deviceUniqueID()) viewController.setViewMode(kMessagingMemberViewMode) viewController.initChannelTitle() viewController.channelUrl = CHANNEL_URL viewController.userName = USER_NAME viewController.userId = USER_ID // チャット画面の表示 let navigationController = UINavigationController.init(rootViewController: viewController) self.presentViewController(navigationController, animated: true) { () -> Void in } }
startSendBird()関数を、適当な場所から呼び出します。viewDidLoadから呼び出すと、うまく行かなかったので、実際のアプリでは適当ではないですが、viewWillAppearなどから呼び出すと、カンタンに表示させることが出来ます。
4.実行
このように、オープンチャットの画面が実現できました!
最後に
追って、API Documentを見ながら、いろいろ動かしてみる記事を書いてみたいと思います。 また、実際に複数の端末を使って動作させて、チャットが実際にちゃんと動いている様子をお見せできたらな、と思います。 お楽しみに!
参考
- 公式ドキュメント Introduction | SendBird iOS SDK